import React, { Suspense } from 'react'
import styles from './index.module.scss'
import Icon from '@/components/Icon'
import classNames from 'classnames'
import { useHistory, useLocation } from 'react-router'
import { Switch, Route } from 'react-router-dom'
import AuthRoute from '@/components/AuthRoute'

const Home = React.lazy(() => import('@/pages/Home'))
const Question = React.lazy(() => import('@/pages/Question'))
const Video = React.lazy(() => import('@/pages/Video'))
const Profile = React.lazy(() => import('@/pages/Profile'))

export default function Layout() {
  const history = useHistory()
  const location = useLocation()

  // 底部tabbar内容
  const TabBar = [
    { title: '首页', to: '/home', icon: 'iconbtn_home' },
    { title: '问答', to: '/home/question', icon: 'iconbtn_qa' },
    { title: '视频', to: '/home/video', icon: 'iconbtn_video' },
    { title: '我的', to: '/home/profile', icon: 'iconbtn_mine' },
  ]
  return (
    <div className={styles.root}>
      {/* 区域一：点击按钮切换显示内容的区域 */}
      <div className="tab-content">
        <Suspense fallback={<div>加载中...</div>}>
          <Switch>
            <Route exact path="/home" component={Home} />
            <Route path="/home/question" component={Question} />
            <Route path="/home/video" component={Video} />
            <AuthRoute path="/home/profile" component={Profile} />
          </Switch>
        </Suspense>
      </div>

      {/* 区域二：按钮区域，会使用固定定位显示在页面底部 */}
      <div className="tabbar">
        {TabBar.map((item) => {
          // 判断当前页面路径和按钮路径是否一致，如果一致则表示该按钮处于选中状态
          const selected = item.to === location.pathname
          return (
            <div
              key={item.title}
              className={classNames(
                'tabbar-item',
                selected ? 'tabbar-item-active' : ''
              )}
              onClick={() => history.push(item.to)}
            >
              <Icon type={item.icon + (selected ? '_sel' : '')} />
              <span>{item.title}</span>
            </div>
          )
        })}
      </div>
    </div>
  )
}
